Customizing a Tree Column

Spread.Viewsでは、階層型のツリー列プレゼンターをカスタマイズできます。ツリー列プレゼンターのカスタマイズでは、イメージを追加したり、ノードの展開や折りたたみ用のドロップダウン矢印を表示したりできます。また、フッターに数式を追加することもできます。

ツリー列をカスタマイズするには、次の手順を実行します。

サンプルコード

1. 列の定義を追加します。hierarchyFooterプロパティを設定して、ツリービューを列に適用します。オプションで、列定義に数式を追加することもできます。

   var columns = [{
               id: 'department',
               caption: 'Department',
               dataField: 'department',
               width: 250,
               hierarchyFooter: '<span style="font-weight:bold">Count: {{=it.eval("=COUNT([id])")}}</span>'
           }, {
               id: 'budget',
               caption: 'Budget',
               dataField: 'budget',
               format: '$0.00',
               minWidth: 120,
               hierarchyFooter: '<span style="font-weight:bold">Total: {{=it.eval("=SUM([budget])", "$0,0")}}</span>'
           }, {
               id: 'location',
               caption: 'Location',
               dataField: 'location',
               minWidth: 120
           }, {
               id: 'phone',
               caption: 'Phone',
               dataField: 'phone',
               minWidth: 120
           }, {
               id: 'country',
               caption: 'Country',
               dataField: 'country',
               minWidth: 120
           }, {
               id: 'id',
               caption: 'Id',
               dataField: 'id',
               visible: false
           }, {
               id: 'parent',
               caption: 'Parent',
               dataField: 'parent',
               visible: false
       }];

2. グリッドの初期化時に、showRowHeaderおよびhierarchyプロパティを設定します。

   var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
               allowSorting: true,
               showRowHeader: false,
               grouping: [{
                   field: 'country',
                   footer: {
                       visible: false
                   }
               }],
               hierarchy: {
                   keyField: 'id',
                   parentField: 'parent',
                   collapsed: true,
                   column: 'department',
                   footer: {
                       visible: true
                   }
               }
       }));

参照

ツリーグリッドの使用
ツリー列の作成
階層フッターのカスタマイズ